<template>
    <div class="box pa-20">
        <!--  用户信息  -->
        <div v-if="isMail" @click="selectAddress">
            <div class="user-address pa-20" v-if="addressEmpty">
                <b>
                    <img src="../../assets/images/icon-user-address.png">
                </b>
                <h4>请选择您的收货地址</h4>
                <van-icon name="arrow"/>
            </div>
            <div class="user-address pa-20" v-else>
                <b>
                    <img src="../../assets/images/icon-user-address.png">
                </b>
                <div>
                    <strong>{{userName}}</strong><span>{{userTel}}</span>
                    <p>{{userAddress}}</p>
                </div>
                <van-icon name="arrow"/>
            </div>
        </div>
        <div class="user-address pa-20" v-else>
            <b>
                <img src="../../assets/images/icon-user-address.png">
            </b>
            <div>
                <strong>提货地址</strong>
                <p>{{userAddress}}</p>
                <div class="phone-box">
                    <label for="">提货人手机号</label>
                    <input type="tel" placeholder="请输入手机号">
                </div>
            </div>
        </div>
        <div class="pa-20 order-info">
            <!--   订单信息     -->
            <router-link to="" class="main-info">
                <i>
                    <img :src="imgSrc">
                </i>
                <p class="multi-line">{{title}}</p>
                <div>
                    <b>¥<strong>{{price}}</strong></b>
                    <span>×{{quantity}}</span>
                </div>
            </router-link>
            <div class="order-num pa-l-r-20">
                <label>购买数量</label>
                <van-stepper v-model="quantity"/>
            </div>
            <div class="order-num pa-l-r-20">
                <label>配送方式</label>
                <div @click="selectDelivery">
                    <span>{{deliveryType}}</span>
                    <van-icon name="arrow"/>
                </div>
            </div>
            <div class="total-box">
                共{{quantity}}件商品,合计: <span>¥</span><b>{{quantity*price}}</b>
            </div>
        </div>
        <div class="bottom-settlement pa-l-r-20">
            共{{quantity}}件商品<i>合计:</i> <span>¥<b>{{quantity*price}}</b></span>
            <button>提交订单</button>
        </div>
    </div>
</template>

<script>
    import img from '../../assets/temporary/ticketsImg.png';//图
    export default {
        name: "confirmOrder",
        data() {
            return {
                userName: "张小明",//用户姓名
                userTel: '15012345678',
                userAddress: '郑州市中原区国家大学科技园西区1号楼12楼1008室',//地址
                imgSrc: img,
                title: `山西黄小米粥小黄米新米5斤特产2019农家五谷月子食用吃的米...`,
                price: 325,
                quantity: 1,//购物数量
                deliveryType: "",
                radioDelivery:"",//配送方式
                isMail:'',
                addressEmpty:false,//地址是否为空
            }
        },
        methods: {
            selectDelivery() {
                //选择配送方式
                let id = this.radioDelivery
                this.$router.push(`/product/selectDelivery/${id}`)
            },
            selectAddress(){
                //选择地址
                this.$router.push("/address/index")
            }
        },
        created() {
            this.radioDelivery = this.$route.params.id
            if (this.$route.params.id == 2) {
                this.deliveryType = '到店自提'
                this.isMail = false
            } else {
                this.deliveryType = '快递邮寄'
                this.isMail = true
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "@/assets/css/public";
    @import "@/assets/css/confirmOrder";

    .user-address {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: vw(200);
        background-color: #fff;
        -webkit-border-radius: vw(20);
        -moz-border-radius: vw(20);
        border-radius: vw(20);
        h4{
            flex: 1;
            padding: 0 vw(30) 0 vw(20);
            color: #999;
            font-size: vw(32);
            font-weight: normal;
        }
        div {
            flex: 1;
            color: #999;
            padding: 0 vw(30) 0 vw(20);
            line-height: vw(40);
            font-size: vw(28);

            strong {
                margin-right: vw(10);
                font-size: vw(32);
                color: #333;
            }

            p {
                margin-top: vw(10);
            }
            &.phone-box {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                height: vw(80);
                padding: 0;
                margin-top: vw(30);
                border-top: 1px solid $gray_bg;
                font-size: vw(28);
                color: #000033;
                input{
                    text-align: right;
                }
            }
        }

        b {
            width: vw(72);
        }
    }
</style>
